{% extends "main/base.html" %}
{% load static %}

{% block title %}{{ believer.identity.name }}{{ believer.username }}{% endblock %}

{% block content %}
<form id="imageForm" style="display: none;" enctype="multipart/form-data">
  <input type="file" id="imageInput" name="image" accept="image/*" onchange="uploadImage();" alt="image">
</form>
<div class="modal fade" id="help" tabindex="-1" aria-labelledby="helpTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <p class="modal-title fs-5" id="helpTitle">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
            <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
          </svg>
          帮助
        </p>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul>
          <li>
            点击头像可以更换头像。
          </li>
          {% if user.identity is None %}
          <li>
            拥有身份的用户可以拥有个人主页。
          </li>
          {% else %}
          <li>
            双击个人主页可以进行修改。<br>
            <strong>点击输入框以外的任意区域才能提交修改！</strong>
          </li>
          {% endif %}
        </ul>
      </div>
    </div>
  </div>
</div>
<div class="mt-3">
  <div class="d-flex">
    <span class="me-auto fs-1">
      <img src="{{ believer.get_image_url }}" width="64px" height="64px" alt="{{ believer.username }}" class="rounded"
           {% if believer == user %}onclick="selectImage();" style="cursor: pointer;"{% endif %}>
      {{ believer.get_display|safe }}
    </span>
    {% if user == believer %}
    <span class="ms-auto align-self-end">
      <button type="button" data-bs-toggle="modal" data-bs-target="#help" class="btn {% if low %}btn-secondary{% else %}btn-primary{% endif %}">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
          <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"></path>
          <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
        </svg>
        帮助
      </button>
    </span>
    {% endif %}
  </div>
  {% if user.identity is not None %}
  <hr>
  <div class="card card-body overflow-y-auto" ondblclick="start_edit();" id="homepage" style="height: 70vh;">
    {{ homepage|safe }}
  </div>
  <form action="{% url 'authentication:change-homepage' %}" method="post" id="edit" style="display: none;">
    {% csrf_token %}
    <label for="content" style="display: none;"></label>
    <textarea class="form-control mb-3" id="content" name="content"
              style="height: 70vh;" onfocusout="end_edit();"{% if user != believer %} readonly{% endif %}>{{ origin_homepage }}</textarea>
  </form>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
  <script src="{% static 'main/js/believer.js' %}" crossorigin="anonymous"></script>
  <script>
    change_image_url = '{% url 'authentication:change-image' %}';
    {% if user == believer %}
    is_user = true;
    {% else %}
    is_user = false;
    {% endif %}
  </script>
{% endblock %}